<template>

	<view class="content">
		<view class="cont">
			<view class="des">
				<view class="des_top">服务精选</view>
				<view class="des_bottom">SELECTED</view>
			</view>
			<view class="clear"></view>
		</view>

		<view class="head">
			<view class="head_left pub" @click="goSelected()">
				<view class="jingxuan public">精选</view>
				<view class="gets public">猜你喜欢</view>
			</view>
			<view class="head_center pub" @click="goDesign()">
				<view class="sheji">设计师</view>
				<view class="mingshi">名师大咖</view>
			</view>
			<view class="head_center pub" @click="goBranfd()">
				<view class="sheji">品牌管</view>
				<view class="mingshi">优质好店</view>
			</view>
		</view>

		<!-- 筛选部分 -->

		<view class="shaixuan">
			<view class="select_top">
				<view class="publ con">美发
					<view class="ico_text">
						<text class="icon iconfont con ">&#xe600;</text>
					</view>
				
				</view>
				<view class="publ">推荐排序
					<view class="ico_text">
						<text class="icon iconfont ">&#xe600;</text>
					</view>
				</view>
				<view class="publ">位置区域
					<view class="ico_text">
						<text class="icon iconfont">&#xe600;</text>
					</view>
				</view>
				<view class="publ">筛选
					<view class="ico_text">
						<text class="icon iconfont">&#xe600;</text>
					</view>
				</view>
			</view>
			
			<view class="select_content">
				<scroll-view scroll-x="true" class="scroll">
					<view class="select_lists" v-for="(item,index) in select_lists" :key='index'>
						{{item}}
					</view>
					
				</scroll-view>
			</view>
		</view>
		
		<!-- 列表 -->
		<view class="list">
			<view class="lists" v-for="(item,index) in 4" :key='index' @click="goService()">
				<view class="lists_img">
					<image src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4191773791,249220039&fm=26&gp=0.jpg" mode="aspectFill"></image>
				</view>
				<view class="lists_infor">
					<view class="list_top">烫发</view>
					<view class="list_center">发型提案+染发+造型</view>
					<view>
						<text class="list_price">￥</text><text class="num">799</text>
						<text class="youhui">预约优惠30%</text>
						<text class="sold">已售1234</text>
					</view>
					<view class="list_bottom">
						<view class="bottom_img"></view>
						<view class="bottom_text">
							<view class="name">JAVEN 美发师 </view>
							<view class="ico_x">
								<view>
									<text class="icon iconfont">&#xe621;</text>
									<text class="icon iconfont">&#xe621;</text>
									<text class="icon iconfont">&#xe621;</text>
									<text class="icon iconfont">&#xe621;</text>
								</view>

							</view>

						</view>
						<view class="distance">4.2m</view>
					</view>
				</view>
			</view>
			<!-- <view class="lists">2</view>
			<view class="lists">3</view> -->
		</view>
	</view>






</template>

<script>
	// import slFilter from '@/components/sl-filter/sl-filter.vue';
	export default {
		data() {
			return {
				select_lists:['洗发','剪发','烫发','染发','护发','头皮','接发'],
				address:''
			}
		},
		components: {
			// slFilter
		},
		methods:{
			//去往精选页面
			goSelected(){
				uni.navigateTo({
					url:'/pagesA/search_serve/searce_serve?city='+this.address,
					fail(err) {
						console.log(err)
					}
				})
			},
			//去往设计师
			goDesign(){
				uni.navigateTo({
					url:'/pagesA/search_design/search_design?city='+this.address
				})
			},
			//去往品牌馆
			goBranfd(){
				uni.navigateTo({
					url:'/pagesA/search_branfd/search_branfd?city='+this.address
				})
			},
			goService(){
				uni.navigateTo({
					url:'/pagesA/serve_detail/serve_detail'
				})
			}
		},
		created() {
			let that = this
			
				uni.$on('dizhi',res=>{
					that.address = res.city
					console.log('aaa',this.address)
				})
		}
	}
</script>

<style scoped lang="less">
	.content {

		// padding: 25rpx 25rpx;
		.cont {
			// width: 100%;
			padding: 14rpx 5rpx;

			.des {
				float: left;
				// margin-left: 10rpx;
				border-left: 7rpx solid #141414;
				margin-left: 25rpx;
				padding-left: 9rpx;

				.des_top {

					font-size: 30rpx;
					font-family: PingFang;
					font-weight: bold;
					color: #333333;

				}

				.des_bottom {

					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}


			.clear {
				clear: both;
			}

		}

		.head {
			// padding: 25rpx 25rpx;
			display: flex;
			justify-content: space-around;

			.pub {
				width: 226rpx;
				background: #DDDDDD;
				border-radius: 4rpx;
			}

			.head_left {

				background: #00C6C2;
				border-radius: 4px;

				.public {
					opacity: 0.7;
				}

				.jingxuan {
					// margin: 18rpx 84rpx 0rpx 84rpx;
					text-align: center;
					margin-top: 18rpx;
					font-size: 30rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #FFFFFF;
				}

				.gets {
					// margin: 11rpx 70rpx 18rpx 69rpx;
					margin-top: 11rpx;
					margin-bottom: 11rpx;
					text-align: center;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

			.head_center {
				.sheji {
					text-align: center;
					font-size: 30rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #333333;
					margin-top: 18rpx;
					margin-bottom: 11rpx;
				}

				.mingshi {
					text-align: center;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #777777;
				}

			}
		}

		.shaixuan {
			margin-top: 10rpx;
			width: 100%;
			height: 150rpx;
			// border: 1px red solid;
			
			.select_top{
				display: flex;
				justify-content: space-around;
				// align-items: center;
				font-size: 30rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #2D2D2D;
				.con{
					color: #00C6C2!important;
				}
				.publ {
					display: flex;
					
					
					.ico_text {
						margin-top: -8rpx;
				
						.iconfont {
							width: 5rpx;
							text-align: center;
							color: black;
							font-size: 12rpx;
							margin-left: 11rpx;
				
						}
						
					}
				
				}
			}
		
			.select_content{
				width: 100%;
				height: 85rpx;
				background: #EEEEEE;
				margin-top: 11rpx;
				.scroll{
					width: 100%;
					height: 100%;
					white-space: nowrap;
					overflow: hidden;
					padding-top:12rpx ;
					.select_lists{
						display: inline-block;
						// margin: 12rpx auto;
						
						width: 100rpx;
						height: 60rpx;
						text-align: center;
						background: #FFFFFF;
						border-radius: 6rpx;
						margin-left: 26rpx;
						line-height:60rpx;
						font-size: 24rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #2F2F2F;
						
					}
				}
				
			}

		}

		.list {
			width: 100%;
			// height: 500rpx;
			// border: 1px red solid;
			background: #F7F7F7;
			// padding-left: 25rpx;
			padding: 25rpx;

			display: inline-block;
			display: flex;
			flex-wrap: wrap;

			// justify-content: space-between;
			.lists {
				// margin-right: 10%;
				width: 345rpx;
				// height: 486rpx;
				margin-right: 10rpx;
				// border: 1rpx blue solid;
				margin-bottom: 10rpx;

				background: #FFFFFF;
				box-shadow: -4rpx 0px 7rpx 0px rgba(203, 203, 203, 0.47);
				border-radius: 4rpx;

				.lists_img {
					width: 100%;
					height: 300rpx;
					background: #00C6C2;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.lists_infor {
					padding: 15rpx 10rpx;

					.list_top {

						font-size: 26rpx;
						font-family: PingFang;
						font-weight: bold;
						color: #333333;
						line-height: 30rpx;
					}

					.list_center {

						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 36rpx;
						margin-top: 9rpx;
					}

					.list_price {

						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #000000;
						line-height: 30rpx;
					}

					.num {
						font-size: 26rpx;
						font-family: PingFang;
						font-weight: bold;
						color: #333333;
						line-height: 30rpx;
					}

					.youhui {

						font-size: 16rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #00C6C2;
						margin-left: 10rpx;
					}

					.sold {

						font-size: 16rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #707070;
						line-height: 30px;
						// margin-right: 0;
						float: right;
					}

					.list_bottom {
						display: flex;
						position: relative;
						// justify-content: space-between;
						width: 100%;

						// align-items: center;
						.bottom_img {
							width: 40rpx;
							height: 40rpx;
							background: #00C6C2;
							border-radius: 50%;
						}

						.bottom_text {
							margin-left: 15rpx;

							// display: flex;
							// flex-direction: column;
							// align-items: center;
							.name {

								font-size: 16rpx;
								font-family: PingFang;
								font-weight: 500;
								color: #4E4E4E;
								// line-height: 30rpx;
							}

							.ico_x {
								// height: 10rpx;
								// width: 100%;
								height: 20rpx;
								// border:  1px red solid;
								// text-align: center;
								line-height: 9rpx;

								.iconfont {
									color: #F2CB51;
									font-size: 16rpx;



								}
							}

							// width: 14rpx;


						}

						.distance {
							// margin-left: 10rpx;
							// width: 160rpx;
							position: absolute;
							right: 0;
							bottom: 0;
							font-size: 16rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #969696;
							line-height: 30rpx;


						}
					}
				}
			}
		}
	}
</style>
